<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-28 01:37:24
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-28 02:25:35
 * @FilePath: \mapview\src\components\pieComponent.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div id='pie-main'>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data () {
        return {
            option: {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      roseType: 'area',
      radius: [20, 120],
      center: ['50%', '50%'],
      // 去掉全部扇区的边框
      itemStyle: {
        borderWidth: 0,
        borderRadius: 5
      },
      data: [
        { value: 648, name: '卫生环境' },
        { value: 735, name: '服务态度' },
        { value: 580, name: '购物配置' },
        { value: 484, name: '餐饮质量' }
      ]
    }
  ]
}
        };
    },
    components: {
        
    },
    created() {
        
    },
    mounted() {
        this.initPieEcharts()
    },
    methods: {
        initPieEcharts(){
            console.log(11);
            var chartDom = document.getElementById('pie-main');
var myChart = echarts.init(chartDom);
this.option && myChart.setOption(this.option);

        }
    },
};
</script>

<style  scoped>
#pie-main{
    width: 100%;
    height: 100%;
}
</style>